<template>
  <ElDialog
    v-model="visible"
    title="查看小区"
    width="800px"
    top="4vh"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <ElForm 
      ref="formRef" 
      :model="form" 
      label-width="120px" 
      label-position="right"
      disabled
    >
      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="小区名称" prop="areaName">
            <ElInput v-model="form.areaName" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="显示状态" prop="areaUpFlag">
            <ElSelect v-model="form.areaUpFlag">
              <ElOption label="隐藏" :value="1" />
              <ElOption label="显示" :value="2" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="24">
          <ElFormItem label="小区地址" prop="areaAddress">
            <ElInput v-model="form.areaAddress" />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="楼栋数" prop="areaHouseNum">
            <ElInputNumber v-model="form.areaHouseNum" :min="1" :max="9999" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem label="单元数" prop="areaUnitNum">
            <ElInputNumber v-model="form.areaUnitNum" :min="1" :max="9999" />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="24">
          <ElFormItem label="小区介绍" prop="areaInfo">
            <ElInput
              v-model="form.areaInfo"
              type="textarea"
              :rows="3"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="24">
          <ElFormItem label="小区规划图" prop="areaPlanInfo">
            <proUploadImg
              v-model:fileList="areaPlanInfo"
              action="/api/api/ossFile/saveFile"
              :maxSize="10"
              :disabled="true"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="24">
          <ElFormItem label="小区图片" prop="areaPhoto">
            <proUploadImg
              v-model:fileList="areaPhoto"
              action="/api/api/ossFile/saveFile"
              :maxSize="10"
              :disabled="true"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <!-- 服务内容管理 -->
      <ElRow :gutter="20">
        <ElCol :span="24">
          <ElFormItem label="服务内容" prop="geoAreaServeList">
            <div>
              <div
                v-for="(service, index) in form.geoAreaServeList"
                :key="service.serveSort"
                class="service-item"
              >
                <div class="flex items-center flex-col gap-2">
                  <div class="flex items-center gap-2 mb-2">
                    <!-- 序号 -->
                    <span class="w-6 text-center">{{ index + 1 }}</span>
                    <ElInput
                      v-model="service.serveName"
                      size="small"
                      disabled
                    />
                  </div>
                </div>
              </div>
            </div>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>

    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleClose">关闭</ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
  import { ref, computed, nextTick, watch } from 'vue'
  import type { FormInstance } from 'element-plus'
  import { GeoAreaVo } from '@/api'
  import { clone } from 'xe-utils'

  // 类型定义
  interface Props {
    modelValue: boolean
    areaData?: GeoAreaVo | null
  }

  interface Emits {
    (e: 'update:modelValue', value: boolean): void
  }

  // Props 和 Emits
  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    areaData: undefined
  })

  const emit = defineEmits<Emits>()

  // 响应式数据
  const formRef = ref<FormInstance>()

  const areaPlanInfo = ref([])

  const areaPhoto = ref([])

  const initForm: GeoAreaVo = {
    areaName: '',
    areaAddress: '',
    areaLongitude: '',
    areaLatitude: '',
    areaHouseNum: 1,
    areaUnitNum: 1,
    areaUpFlag: 2,
    areaInfo: '',
    areaPlanInfo: '',
    areaPhoto: '',
    geoAreaServeList: []
  }

  const form = ref<GeoAreaVo>(clone(initForm, true))

  // 计算属性
  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  })

  // 监听 areaData 变化，确保数据及时更新
  watch(() => props.areaData, (newVal) => {
    if (newVal && visible.value) {
      updateFormData(newVal)
    }
  }, { deep: true })

  // 更新表单数据的方法
  const updateFormData = (data: GeoAreaVo) => {
    areaPlanInfo.value = JSON.parse(data.areaPlanInfo || '[]')
    areaPhoto.value = JSON.parse(data.areaPhoto || '[]')
    nextTick(() => {
      form.value = clone(data, true)
    })
  }

  const handleOpen = () => {
    if (props.areaData) {
      updateFormData(props.areaData)
    } else {
      form.value = clone(initForm, true)
    }
  }

  const handleClose = () => {
    visible.value = false
  }

  // 监听弹窗打开
  defineExpose({
    handleOpen
  })
</script>

<style lang="scss" scoped>
  :deep(.service-item) {
    .el-form-item__content {
      .el-form-item__error {
        margin-top: -12px;
        margin-left: 46px;
      }
    }
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
</style>